<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script  src="../build/react.js"></script>
    <script  src="../build/react-dom.js"></script>
    <script  src="../build/browser.min.js"></script>
</head>
<body>
<script type="text/babel">
    var Logonqq=React.createClass({
        getDefaultProps: function() {
            return {
                title: 'QQ登录'
            }
        },
        getInitialState: function() {
            return {
                name: 'QQ号码',
                pwd:'密码',
                nameIptTips:false,
                pwdIptTips:false,
                tips:false
            }
            },
        handleFocusName: function(event) {
            this.setState({name: ''});
        },
        handleFocusPwd: function(event) {
            this.setState({pwd: '' });
        },
        handleChangeMame: function(event) {
            this.setState({name: event.target.value});
        },
        handleChangePwd: function(event) {
            this.setState({pwd: event.target.value});
        },
        validateLogon:function () {
            var userName=this.state.name;
            var pwd=this.state.pwd;
            if(userName==""||userName==null){
                this.setState({nameIptTips:true});
            }else{
                this.setState({nameIptTips:false});
                if(!(userName=="839470083")){
                    this.setState({tips:true});
                }else{
                    this.setState({tips:false});
                }
            }
            if(pwd==""||pwd==null){
                this.setState({pwdIptTips:true});
            }else{
                this.setState({pwdIptTips:false});
            }
        },
        componentWillReceiveProps:function (newProps) {
            this.setState({nameIptTips: newProps.nameIptTips});
            this.setState({pwdIptTips: newProps.pwdIptTips});
            this.setState({tips: newProps.tips});

        },
            render: function(){
                return (
                        <div>
                             <h1>{this.props.title}</h1>
                            <input type="text" id="Inpname"  value={this.state.name}  onFocus={this.handleFocusName} onChange={this.handleChangeMame}/> 注册账号<br/>
                            {
                                this.state.nameIptTips ?
                                        <div>请您输入账号后再登录</div> :  <div style={{display:"none"}}>请您输入账号后再登录</div>
                            }
                            <input  type="text"  value={this.state.pwd}  onFocus={this.handleFocusPwd} onChange={this.handleChangePwd} />找回密码<br/>
                            {
                                this.state.pwdIptTips ?
                                        <div>请您输入密码后再登录</div> :  <div style={{display:"none"}}>请您输入密码后再登录</div>
                            }
                            <input  type="button" onClick={this.validateLogon} value="登录" />
                            {
                                this.state.tips ?
                                    <div>您输入的账号不存在，请重新确认后输入</div> :<div style={{display:"none"}}>您输入的账号不存在，请重新确认后输入</div>
                            }

                        </div>
                )
            }


      //  componentDidMount:function () {
         //  var timer= setInterval(function(){document.getElementById("Inpname").focus()},500);

     //   }

        }
    );
    ReactDOM.render(<Logonqq />, document.body);
</script>
</body>
</html>